import {colorItem} from './types'

export const setTheme = (type = 'light') => {
  const root: any = document.querySelector('#root');
  const colorConstants: {
    dark: colorItem[],
    light: colorItem[],
  } = {
    dark: [
      {
        att: '--bg-color',
        color: '#000000',
      },
      {
        att: '--font-color',
        color: '#ffffff'
      },
      {
        att: '--border-color',
        color: '#262626'
      },
      {
        att: '--taiji-border-color',
        color: '#ffffff'
      },
      {
        att: '--box-shadow-color',
        color: '#525252'
      },
    ],
    light: [
      {
        att: '--bg-color',
        color: '#ffffff'
      },
      {
        att: '--font-color',
        color: '#000000'
      },
      {
        att: '--border-color',
        color: '#d4d3d3'
      },
      {
        att: '--taiji-border-color',
        color: '#000000'
      },
      {
        att: '--box-shadow-color',
        color: '#00000033'
      },
    ]
  }
  // @ts-ignore
  colorConstants[type].forEach(({att, color}) => {
    root.style.setProperty(att, color);
  })
}

export const serLogoShadow = () => {
  const myWindow = window
  let innerHeight = myWindow.innerHeight, innerWidth = myWindow.innerWidth
  let shadowX = 0, shadowY = 0, shadowZ = 20
  const mouseMove = (e:any) => {
    if (document.querySelector('.home #taiji')) {
      if (e.clientX < innerWidth / 2) shadowX = Math.round(((innerWidth / 2) - e.clientX) / 30)
      else shadowX = Math.round(((innerWidth / 2) - e.clientX) / 30)
      if (e.clientY < innerHeight / 2) shadowY = Math.round(((innerHeight / 2) - e.clientY) / 30)
      else shadowY = Math.round(((innerHeight / 2) - e.clientY) / 30)
      // shadowZ = Math.round( (shadowX + shadowY) / 2)
      const taiji: any = document.querySelector('.home #taiji')
      taiji.style.boxShadow = `${shadowX}px ${shadowY}px ${shadowZ}px #00000099`
    }
  }
  myWindow.addEventListener('mousemove', mouseMove, false)
  myWindow.addEventListener('resize', (e: any) => {
    innerHeight = e.target.innerWidth
    innerWidth = e.target.innerHeight
  })
}